<template>
	<view class="wrap" style="100vh">
		<js-error mode="bottom" ref="jsError"></js-error>
		<u-sticky class="u-sticky">
			<view class="cu-bar search" style="padding: 10px">
			  <u-search
			    v-model="barCode"
			    ref="uSearch"
			    :focus="focus"
			    placeholder="请先聚焦后扫描"
			    :show-action="false"
			    @search="confirm"
			  ></u-search>
			  <view style="margin-left: 10px; display: flex; flex-direction: column">
			    <u-icon @click="search" name="scan" size="50"></u-icon>
			  </view>
			</view>
		</u-sticky>
		<!-- -->
		<view v-if="flag">
			<!-- style="padding: 0 10px" -->
			<u-form :model="model" :rules="rules" ref="uForm" label-position="left" >
				<scroll-view
				  scroll-y="true"
				  :style="{ height: scrollViewHeight + 'px' }"
				  class="scroll-view-class"
				>
				<!-- class="bg-white  radius" -->
					<view class="bg-white  padding  margin-bottom shadow">
						<u-form-item label="存货代码"  label-width="180">
							{{ model.basInv.cinvaddcode }}
						</u-form-item>
						<u-form-item label="存货编码"  label-width="180">
							{{ model.basInv.cinvcode }}
						</u-form-item>
						<u-form-item label="存货名称" prop="gongxu_name" label-width="180">
							{{ model.basInv.cinvname }}
						</u-form-item>
						
						<u-form-item label="数量" prop="gongxu_name" label-width="180">
							{{ model.iqty }}	
						</u-form-item>
						<view class="flex margin-top">
							<u-icon class="cuIcon-titles" size="50" color="#0081ff"></u-icon> 
							<view class="text-xxl text-black">请选择工装信息</view>
						</view>
						
					</view>
					<view class="bg-white margin" v-for="(item,index) in model.moldList" :key="index"  @click="selectItem(index)">
						<view  class="cu-form-group flex justify-between ">
							<view class="flex align-center">
								<view style="display: inline-block;padding: 5px;background: #3E97B0;color: #fff;min-width: 40px;text-align: center;font-style: italic;font-weight: bold">
									{{ index + 1  }}
								</view>
								<view class="text-xxl margin-left text-black">
									{{ item.basMold&&item.basMold.code ? item.basMold.code : '' }}
								</view>
							</view>
							<view class="">
								<text style="font-size: 35px;" class="cuIcon-squarecheck text-sl " :class="selectedItemIndex === index ? 'text-red' : 'text-gray'"></text>
							</view>
						</view>
						<u-form-item label="名称"  label-width="220" class="paddingForm">
							 {{ item.basMold&&item.basMold.name ? item.basMold.name : '' }}
						</u-form-item>
						<u-form-item label="类型"  label-width="220" class="paddingForm">
							{{ item.basMold&&item.basMold.basMoldCls&&item.basMold.basMoldCls.code ? '('+item.basMold.basMoldCls.code+')' : '' }}
							 {{ item.basMold&&item.basMold.basMoldCls&&item.basMold.basMoldCls.name ? item.basMold.basMoldCls.name : '' }}
						</u-form-item>
						<u-form-item label="工序"  label-width="220" class="paddingForm">
							 {{ item.operCode ? item.operCode : '' }}
						</u-form-item>
						<u-form-item label="工装尾号" prop="lastNum" label-width="220" class="paddingForm" :label-position="item.lastNums.length>1 ? 'bottom' : 'left'">
							<js-radio v-model="item.lastNum" :items="item.lastNums" v-if="item.lastNums.length>1" ></js-radio>
							<u-input placeholder="请输入" v-model="item.lastNum" type="text" maxlength="64" :disabled="true"  v-else></u-input>
						</u-form-item>
					</view>				
				</scroll-view>
				
				
				
			</u-form>
			<view class="cu-bar"></view>
			<view class="form-footer cu-bar foot">
				<u-button class="btn" type="primary" @click="submit">确认</u-button>
			</view>
			
		</view>
		<u-empty  style="height: 80vh;" text="请扫码现品票"  v-if="!flag"></u-empty>
		
		<view>
			<movable-area class="movable-area1">
				<movable-view class="movable-view" :x="x" :y="y" direction="all">
					<view @click="handleSearch" class="custom-style" style="width: 90px; height: 70px; color: #fff; border-radius: 10rpx;">
						<view style="font-size: 16px;display: flex; flex-direction: column;text-align: center;">
							<text class="cuIcon-scan text-xxls text-blue"></text>
							<view class="text-blue">现品票识别</view>
						</view>
					</view>
					
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	import commonEditMixin from '@/libs/mixin/commonEditMixin.js';
	export default {
		mixins: [commonEditMixin],
		data() {
			return {
				model: {},
				focus:false,
				barCode: "",
				rules: {
					lastNum:[
						{
							required: true,
							message: '请选择工装尾号',
							trigger: ['change','blur'],
						}
					]
				},
				barcode1:'',
				scrollViewHeight:0,
				formFooterHeight: 0,
				headerHeight: 0,
				x: 650, //x坐标
				y: 650, //y坐标
				flag:false,
				selectedItemIndex: null ,
				type: null, //1 为repair，2为keep
			}
		},
		// 计算每一个item的模具尾号
		onReady() {
			
			
		},
		onLoad(e) {
			if(!!e.type){
				this.type = e.type
			}
		},
		mounted() {
			
			
		  this.calculateScrollViewHeight();
		},
		methods:{
			selectItem(index) {
			  this.selectedItemIndex = index; // 更新选中项的索引
			},
			DateChange(item, e) {
			  console.log(item, e);
			  //   this.date = e.detail.value;
			  if (item === "stratDate") {
			    this.model.stratDate = e.detail.value;
			  } else if(item === "endDate"){
				this.model.endDate = e.detail.value;
			  }
			  this.$forceUpdate();
			},
			handleSearch(){
				if(this.vuex_config.deviceType === this.vuex_config.deviceTypeAPP){
					this.search()
				}else if(this.vuex_config.deviceType === this.vuex_config.deviceTypePDA){
					this.handleFocus()
				}
			},
			submit(){
				console.log(this.model.moldList,this.selectedItemIndex)
				if(this.selectedItemIndex === null){
					this.$refs.jsError.showError('', '请选择工装' , 'error');
					return false;
				}
				const currentMold = this.model.moldList[this.selectedItemIndex]
				console.log('moldList',currentMold.lastNum,'----',currentMold.lastNums)
				let hasErrorMsg = ''
				// if(!currentMold.lastNum){
				// 	hasErrorMsg = `工装编号"${currentMold.basMold.code}"名称"${currentMold.basMold.name}"请选择工装尾号`
				// 	this.$refs.jsError.showError('', hasErrorMsg , 'error');
				// 	return false;
				// }
				if(this.type == 1){
					uni.navigateTo({
					  url: "/pages/asd/repair/add?mold="+ JSON.stringify(currentMold),
					});
				} else if(this.type == 2){
					uni.navigateTo({
					  url: "/pages/asd/upkeep/add?mold="+ JSON.stringify(currentMold),
					});
				}				
			},
			async calculateScrollViewHeight() {
			  	await this.$nextTick(); // 确保DOM更新完成
			  	const query = uni.createSelectorQuery().in(this);
				// 获取form-footer 的高度
				query.select(".form-footer").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
						this.formFooterHeight = rect.height;
					}
				});
				query.select(".u-sticky").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
					this.headerHeight = rect.height;
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - this.headerHeight - this.formFooterHeight -80;
					console.log(this.scrollViewHeight, 'this.scrollViewHeight');
					} else {
						
					console.error('无法获取.u-sticky的高度或高度为0');
					}
				}).exec();
			},
			confirm() {
				this.focus = false
				console.log(this.barCode, 'barCode')
				this.barcode1 = this.barCode
				this.commonSearch(this.barCode)
			},

			async commonSearch(barCode) {
				let that = this
				//扫货位
				this.$u.api.asd.findMolds({
					barCode,
				}).then(res => {
					if (res.result == 'true') {
						
						// 返回一个新的数组，res.list数组里面 lastNums的数组长度大于1，设置lastNum 为''，把basMold 里面的值平铺，并且lastNums的数组长度大于1，设置lastNum 为''
						let newList = res.list.map(item=>{
							item = {...item,...item.basMold}
							if(item.lastNums.length>1){
								item.lastNum = ''
								item.basMold.lastNum = ''
							}
							return item
						})
						console.log('lastNum',res.list)

						this.flag = true
						this.model = {
							basInv : res.xppData.basInv,
							iqty : res.xppData.qty,
							moldList : newList
						}
						console.log('model',this.model)
						setTimeout(()=>{
							that.makeSound("cg");
						},500)
						that.$u.toast('成功！');
					} else {
						setTimeout(()=>{
							that.makeSound("sb");
						},500)
						that.$refs.jsError.showError('', res.message, 'error');
					}
					setTimeout(() => {
						this.barCode = '';
					}, 500);
					if(this.vuex_config.deviceType === this.vuex_config.deviceTypePDA){
						this.handleFocus()
					}
							
				})
				setTimeout(() => {
					this.barCode = '';
				}, 500);
				
			},
		}
	}
</script>

<style  lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area1 {
	  z-index: 999;
	  height: 97vh;
	  width: 650rpx;
	  position: fixed;
	  right: $all_width;
	  top: -($all_height + 70rpx);
	  pointer-events: none; //此处要加，鼠标事件可以渗透
	
	  .movable-view {
	    width: $all_width;
	    height: $all_height;
	    pointer-events: auto; //恢复鼠标事件
	
	    image {
	      width: $all_width;
	      height: $all_height;
	    }
	  }
	}
	.cuIcon-titles{
		color:#0081ff;
		font-size: 50rpx;
	}
	.paddingForm{
		padding: 18rpx 28rpx;
	}
	.text-xxls{
		font-size: 60rpx;
	}
	.select-date-prompt{
		font-size: 28rpx;
		color: #dfdfdf !important;
	}
</style>